<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        
        $(function () {  //当页面的节点全部加载完成之后  执行下面的语句
            var $div = $('#div1');
            $div.css({'color':'red'});   //设置字体颜色

            var $div2 = $('.box');       
            $div2.css({'color':'green'});


            var $li = $(".list li");
            $li.css({'background-color':'pink'});


            }
        );
    
    </script>
<!--     <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            background-color: pink;
        }

    </style> -->
    <title>Document</title>
</head>
<body>
    <div id="div1">这是一个Div元素</div>
    <div class="box">这是第二个Div元素</div>
    <div class="box">这是第三个Div元素</div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>


</body>
</html>